<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1169204" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">vip1</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">vip2</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">vip3</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">vip4</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">vip5</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">vip6</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">vip7</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">vip8</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">vip9</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">delate</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">Bank card</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">add_circle</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">arrows_down</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">arrows_right</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">arrows_up</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">arrows_left</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">choose_done_line</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">choose_done_surface</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">choose_done</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">choose_none_line</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">close_circle_line</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">close_circle_surface</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">close_line</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">collect_line</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">collect_surface</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">delete_cell</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">more_circle</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">more_point</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">phone_line</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">reduce_circle</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">setup</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">live_me</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">my_meetings</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">news</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">open_eye</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">good_line</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">community_me</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">invite_friends</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">signin</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">present</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">make_money_line</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">home_line</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">receipt</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">earned_premium</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">common_problem</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">delete_rubbish</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">id</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name"> business_permit</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">approve_after</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">approve</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">ask</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">answer</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">comment</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">message_learn</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">menu_learn</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">phone_surface</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">customer</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">wechat_surface</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">rotary_table</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">ticket</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">means</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">safe</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">recommend</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">red_packet</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">bullet_screen</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">bullet_screen_close</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">study_line</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">greeting_card</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">qr_code</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">square_line</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">money</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">classification</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">term</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">settlement</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">concept</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">book</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">discussion</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">tie</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">bag</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">camera_flip</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">grab_class</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">flower</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">direction_left</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">direction_right</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">diamond</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">jifen</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-alipay"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip1"></span>
            <div class="name">
              vip1
            </div>
            <div class="code-name">.icon-vip1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip2"></span>
            <div class="name">
              vip2
            </div>
            <div class="code-name">.icon-vip2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip3"></span>
            <div class="name">
              vip3
            </div>
            <div class="code-name">.icon-vip3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip4"></span>
            <div class="name">
              vip4
            </div>
            <div class="code-name">.icon-vip4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip5"></span>
            <div class="name">
              vip5
            </div>
            <div class="code-name">.icon-vip5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip6"></span>
            <div class="name">
              vip6
            </div>
            <div class="code-name">.icon-vip6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip7"></span>
            <div class="name">
              vip7
            </div>
            <div class="code-name">.icon-vip7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip8"></span>
            <div class="name">
              vip8
            </div>
            <div class="code-name">.icon-vip8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip9"></span>
            <div class="name">
              vip9
            </div>
            <div class="code-name">.icon-vip9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delate"></span>
            <div class="name">
              delate
            </div>
            <div class="code-name">.icon-delate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bankcard"></span>
            <div class="name">
              Bank card
            </div>
            <div class="code-name">.icon-bankcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add_circle"></span>
            <div class="name">
              add_circle
            </div>
            <div class="code-name">.icon-add_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrows_down"></span>
            <div class="name">
              arrows_down
            </div>
            <div class="code-name">.icon-arrows_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrows_right"></span>
            <div class="name">
              arrows_right
            </div>
            <div class="code-name">.icon-arrows_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrows_up"></span>
            <div class="name">
              arrows_up
            </div>
            <div class="code-name">.icon-arrows_up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrows_left"></span>
            <div class="name">
              arrows_left
            </div>
            <div class="code-name">.icon-arrows_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choose_done_line"></span>
            <div class="name">
              choose_done_line
            </div>
            <div class="code-name">.icon-choose_done_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choose_done_surface"></span>
            <div class="name">
              choose_done_surface
            </div>
            <div class="code-name">.icon-choose_done_surface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choose_done"></span>
            <div class="name">
              choose_done
            </div>
            <div class="code-name">.icon-choose_done
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choose_none_line"></span>
            <div class="name">
              choose_none_line
            </div>
            <div class="code-name">.icon-choose_none_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close_circle_line"></span>
            <div class="name">
              close_circle_line
            </div>
            <div class="code-name">.icon-close_circle_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close_circle_surface"></span>
            <div class="name">
              close_circle_surface
            </div>
            <div class="code-name">.icon-close_circle_surface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close_line"></span>
            <div class="name">
              close_line
            </div>
            <div class="code-name">.icon-close_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collect_line"></span>
            <div class="name">
              collect_line
            </div>
            <div class="code-name">.icon-collect_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collect_surface"></span>
            <div class="name">
              collect_surface
            </div>
            <div class="code-name">.icon-collect_surface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete_cell"></span>
            <div class="name">
              delete_cell
            </div>
            <div class="code-name">.icon-delete_cell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more_circle"></span>
            <div class="name">
              more_circle
            </div>
            <div class="code-name">.icon-more_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more_point"></span>
            <div class="name">
              more_point
            </div>
            <div class="code-name">.icon-more_point
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone_line"></span>
            <div class="name">
              phone_line
            </div>
            <div class="code-name">.icon-phone_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reduce_circle"></span>
            <div class="name">
              reduce_circle
            </div>
            <div class="code-name">.icon-reduce_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setup"></span>
            <div class="name">
              setup
            </div>
            <div class="code-name">.icon-setup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-live_me"></span>
            <div class="name">
              live_me
            </div>
            <div class="code-name">.icon-live_me
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-my_meetings"></span>
            <div class="name">
              my_meetings
            </div>
            <div class="code-name">.icon-my_meetings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-news"></span>
            <div class="name">
              news
            </div>
            <div class="code-name">.icon-news
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-open_eye"></span>
            <div class="name">
              open_eye
            </div>
            <div class="code-name">.icon-open_eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.icon-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-good_line"></span>
            <div class="name">
              good_line
            </div>
            <div class="code-name">.icon-good_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-community_me"></span>
            <div class="name">
              community_me
            </div>
            <div class="code-name">.icon-community_me
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invite_friends"></span>
            <div class="name">
              invite_friends
            </div>
            <div class="code-name">.icon-invite_friends
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-signin"></span>
            <div class="name">
              signin
            </div>
            <div class="code-name">.icon-signin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-present"></span>
            <div class="name">
              present
            </div>
            <div class="code-name">.icon-present
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-make_money_line"></span>
            <div class="name">
              make_money_line
            </div>
            <div class="code-name">.icon-make_money_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home_line"></span>
            <div class="name">
              home_line
            </div>
            <div class="code-name">.icon-home_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receipt"></span>
            <div class="name">
              receipt
            </div>
            <div class="code-name">.icon-receipt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-earned_premium"></span>
            <div class="name">
              earned_premium
            </div>
            <div class="code-name">.icon-earned_premium
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-common_problem"></span>
            <div class="name">
              common_problem
            </div>
            <div class="code-name">.icon-common_problem
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete_rubbish"></span>
            <div class="name">
              delete_rubbish
            </div>
            <div class="code-name">.icon-delete_rubbish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-id"></span>
            <div class="name">
              id
            </div>
            <div class="code-name">.icon-id
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-business_permit"></span>
            <div class="name">
               business_permit
            </div>
            <div class="code-name">.icon-business_permit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-approve_after"></span>
            <div class="name">
              approve_after
            </div>
            <div class="code-name">.icon-approve_after
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-approve"></span>
            <div class="name">
              approve
            </div>
            <div class="code-name">.icon-approve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ask"></span>
            <div class="name">
              ask
            </div>
            <div class="code-name">.icon-ask
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-answer"></span>
            <div class="name">
              answer
            </div>
            <div class="code-name">.icon-answer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">.icon-comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message_learn"></span>
            <div class="name">
              message_learn
            </div>
            <div class="code-name">.icon-message_learn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu_learn"></span>
            <div class="name">
              menu_learn
            </div>
            <div class="code-name">.icon-menu_learn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone_surface"></span>
            <div class="name">
              phone_surface
            </div>
            <div class="code-name">.icon-phone_surface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customer"></span>
            <div class="name">
              customer
            </div>
            <div class="code-name">.icon-customer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wechat_surface"></span>
            <div class="name">
              wechat_surface
            </div>
            <div class="code-name">.icon-wechat_surface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rotary_table"></span>
            <div class="name">
              rotary_table
            </div>
            <div class="code-name">.icon-rotary_table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ticket"></span>
            <div class="name">
              ticket
            </div>
            <div class="code-name">.icon-ticket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-means"></span>
            <div class="name">
              means
            </div>
            <div class="code-name">.icon-means
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-safe"></span>
            <div class="name">
              safe
            </div>
            <div class="code-name">.icon-safe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-recommend"></span>
            <div class="name">
              recommend
            </div>
            <div class="code-name">.icon-recommend
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-red_packet"></span>
            <div class="name">
              red_packet
            </div>
            <div class="code-name">.icon-red_packet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bullet_screen"></span>
            <div class="name">
              bullet_screen
            </div>
            <div class="code-name">.icon-bullet_screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bullet_screen_close"></span>
            <div class="name">
              bullet_screen_close
            </div>
            <div class="code-name">.icon-bullet_screen_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-study_line"></span>
            <div class="name">
              study_line
            </div>
            <div class="code-name">.icon-study_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-greeting_card"></span>
            <div class="name">
              greeting_card
            </div>
            <div class="code-name">.icon-greeting_card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qr_code"></span>
            <div class="name">
              qr_code
            </div>
            <div class="code-name">.icon-qr_code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-square_line"></span>
            <div class="name">
              square_line
            </div>
            <div class="code-name">.icon-square_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money"></span>
            <div class="name">
              money
            </div>
            <div class="code-name">.icon-money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-classification"></span>
            <div class="name">
              classification
            </div>
            <div class="code-name">.icon-classification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-term"></span>
            <div class="name">
              term
            </div>
            <div class="code-name">.icon-term
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settlement"></span>
            <div class="name">
              settlement
            </div>
            <div class="code-name">.icon-settlement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-concept"></span>
            <div class="name">
              concept
            </div>
            <div class="code-name">.icon-concept
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-book"></span>
            <div class="name">
              book
            </div>
            <div class="code-name">.icon-book
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-discussion"></span>
            <div class="name">
              discussion
            </div>
            <div class="code-name">.icon-discussion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tie"></span>
            <div class="name">
              tie
            </div>
            <div class="code-name">.icon-tie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bag"></span>
            <div class="name">
              bag
            </div>
            <div class="code-name">.icon-bag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera_flip"></span>
            <div class="name">
              camera_flip
            </div>
            <div class="code-name">.icon-camera_flip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-grab_class"></span>
            <div class="name">
              grab_class
            </div>
            <div class="code-name">.icon-grab_class
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flower"></span>
            <div class="name">
              flower
            </div>
            <div class="code-name">.icon-flower
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-direction_left"></span>
            <div class="name">
              direction_left
            </div>
            <div class="code-name">.icon-direction_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-direction_right"></span>
            <div class="name">
              direction_right
            </div>
            <div class="code-name">.icon-direction_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diamond"></span>
            <div class="name">
              diamond
            </div>
            <div class="code-name">.icon-diamond
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              jifen
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip1"></use>
                </svg>
                <div class="name">vip1</div>
                <div class="code-name">#icon-vip1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip2"></use>
                </svg>
                <div class="name">vip2</div>
                <div class="code-name">#icon-vip2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip3"></use>
                </svg>
                <div class="name">vip3</div>
                <div class="code-name">#icon-vip3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip4"></use>
                </svg>
                <div class="name">vip4</div>
                <div class="code-name">#icon-vip4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip5"></use>
                </svg>
                <div class="name">vip5</div>
                <div class="code-name">#icon-vip5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip6"></use>
                </svg>
                <div class="name">vip6</div>
                <div class="code-name">#icon-vip6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip7"></use>
                </svg>
                <div class="name">vip7</div>
                <div class="code-name">#icon-vip7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip8"></use>
                </svg>
                <div class="name">vip8</div>
                <div class="code-name">#icon-vip8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip9"></use>
                </svg>
                <div class="name">vip9</div>
                <div class="code-name">#icon-vip9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delate"></use>
                </svg>
                <div class="name">delate</div>
                <div class="code-name">#icon-delate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bankcard"></use>
                </svg>
                <div class="name">Bank card</div>
                <div class="code-name">#icon-bankcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add_circle"></use>
                </svg>
                <div class="name">add_circle</div>
                <div class="code-name">#icon-add_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrows_down"></use>
                </svg>
                <div class="name">arrows_down</div>
                <div class="code-name">#icon-arrows_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrows_right"></use>
                </svg>
                <div class="name">arrows_right</div>
                <div class="code-name">#icon-arrows_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrows_up"></use>
                </svg>
                <div class="name">arrows_up</div>
                <div class="code-name">#icon-arrows_up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrows_left"></use>
                </svg>
                <div class="name">arrows_left</div>
                <div class="code-name">#icon-arrows_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choose_done_line"></use>
                </svg>
                <div class="name">choose_done_line</div>
                <div class="code-name">#icon-choose_done_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choose_done_surface"></use>
                </svg>
                <div class="name">choose_done_surface</div>
                <div class="code-name">#icon-choose_done_surface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choose_done"></use>
                </svg>
                <div class="name">choose_done</div>
                <div class="code-name">#icon-choose_done</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choose_none_line"></use>
                </svg>
                <div class="name">choose_none_line</div>
                <div class="code-name">#icon-choose_none_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close_circle_line"></use>
                </svg>
                <div class="name">close_circle_line</div>
                <div class="code-name">#icon-close_circle_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close_circle_surface"></use>
                </svg>
                <div class="name">close_circle_surface</div>
                <div class="code-name">#icon-close_circle_surface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close_line"></use>
                </svg>
                <div class="name">close_line</div>
                <div class="code-name">#icon-close_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collect_line"></use>
                </svg>
                <div class="name">collect_line</div>
                <div class="code-name">#icon-collect_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collect_surface"></use>
                </svg>
                <div class="name">collect_surface</div>
                <div class="code-name">#icon-collect_surface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete_cell"></use>
                </svg>
                <div class="name">delete_cell</div>
                <div class="code-name">#icon-delete_cell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_circle"></use>
                </svg>
                <div class="name">more_circle</div>
                <div class="code-name">#icon-more_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_point"></use>
                </svg>
                <div class="name">more_point</div>
                <div class="code-name">#icon-more_point</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone_line"></use>
                </svg>
                <div class="name">phone_line</div>
                <div class="code-name">#icon-phone_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reduce_circle"></use>
                </svg>
                <div class="name">reduce_circle</div>
                <div class="code-name">#icon-reduce_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setup"></use>
                </svg>
                <div class="name">setup</div>
                <div class="code-name">#icon-setup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-live_me"></use>
                </svg>
                <div class="name">live_me</div>
                <div class="code-name">#icon-live_me</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my_meetings"></use>
                </svg>
                <div class="name">my_meetings</div>
                <div class="code-name">#icon-my_meetings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news"></use>
                </svg>
                <div class="name">news</div>
                <div class="code-name">#icon-news</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-open_eye"></use>
                </svg>
                <div class="name">open_eye</div>
                <div class="code-name">#icon-open_eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#icon-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-good_line"></use>
                </svg>
                <div class="name">good_line</div>
                <div class="code-name">#icon-good_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-community_me"></use>
                </svg>
                <div class="name">community_me</div>
                <div class="code-name">#icon-community_me</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invite_friends"></use>
                </svg>
                <div class="name">invite_friends</div>
                <div class="code-name">#icon-invite_friends</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-signin"></use>
                </svg>
                <div class="name">signin</div>
                <div class="code-name">#icon-signin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-present"></use>
                </svg>
                <div class="name">present</div>
                <div class="code-name">#icon-present</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-make_money_line"></use>
                </svg>
                <div class="name">make_money_line</div>
                <div class="code-name">#icon-make_money_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home_line"></use>
                </svg>
                <div class="name">home_line</div>
                <div class="code-name">#icon-home_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receipt"></use>
                </svg>
                <div class="name">receipt</div>
                <div class="code-name">#icon-receipt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-earned_premium"></use>
                </svg>
                <div class="name">earned_premium</div>
                <div class="code-name">#icon-earned_premium</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-common_problem"></use>
                </svg>
                <div class="name">common_problem</div>
                <div class="code-name">#icon-common_problem</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete_rubbish"></use>
                </svg>
                <div class="name">delete_rubbish</div>
                <div class="code-name">#icon-delete_rubbish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-id"></use>
                </svg>
                <div class="name">id</div>
                <div class="code-name">#icon-id</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-business_permit"></use>
                </svg>
                <div class="name"> business_permit</div>
                <div class="code-name">#icon-business_permit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-approve_after"></use>
                </svg>
                <div class="name">approve_after</div>
                <div class="code-name">#icon-approve_after</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-approve"></use>
                </svg>
                <div class="name">approve</div>
                <div class="code-name">#icon-approve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ask"></use>
                </svg>
                <div class="name">ask</div>
                <div class="code-name">#icon-ask</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-answer"></use>
                </svg>
                <div class="name">answer</div>
                <div class="code-name">#icon-answer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-comment"></use>
                </svg>
                <div class="name">comment</div>
                <div class="code-name">#icon-comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message_learn"></use>
                </svg>
                <div class="name">message_learn</div>
                <div class="code-name">#icon-message_learn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu_learn"></use>
                </svg>
                <div class="name">menu_learn</div>
                <div class="code-name">#icon-menu_learn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone_surface"></use>
                </svg>
                <div class="name">phone_surface</div>
                <div class="code-name">#icon-phone_surface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer"></use>
                </svg>
                <div class="name">customer</div>
                <div class="code-name">#icon-customer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wechat_surface"></use>
                </svg>
                <div class="name">wechat_surface</div>
                <div class="code-name">#icon-wechat_surface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rotary_table"></use>
                </svg>
                <div class="name">rotary_table</div>
                <div class="code-name">#icon-rotary_table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ticket"></use>
                </svg>
                <div class="name">ticket</div>
                <div class="code-name">#icon-ticket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-means"></use>
                </svg>
                <div class="name">means</div>
                <div class="code-name">#icon-means</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-safe"></use>
                </svg>
                <div class="name">safe</div>
                <div class="code-name">#icon-safe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recommend"></use>
                </svg>
                <div class="name">recommend</div>
                <div class="code-name">#icon-recommend</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-red_packet"></use>
                </svg>
                <div class="name">red_packet</div>
                <div class="code-name">#icon-red_packet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bullet_screen"></use>
                </svg>
                <div class="name">bullet_screen</div>
                <div class="code-name">#icon-bullet_screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bullet_screen_close"></use>
                </svg>
                <div class="name">bullet_screen_close</div>
                <div class="code-name">#icon-bullet_screen_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-study_line"></use>
                </svg>
                <div class="name">study_line</div>
                <div class="code-name">#icon-study_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-greeting_card"></use>
                </svg>
                <div class="name">greeting_card</div>
                <div class="code-name">#icon-greeting_card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr_code"></use>
                </svg>
                <div class="name">qr_code</div>
                <div class="code-name">#icon-qr_code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-square_line"></use>
                </svg>
                <div class="name">square_line</div>
                <div class="code-name">#icon-square_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money"></use>
                </svg>
                <div class="name">money</div>
                <div class="code-name">#icon-money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-classification"></use>
                </svg>
                <div class="name">classification</div>
                <div class="code-name">#icon-classification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-term"></use>
                </svg>
                <div class="name">term</div>
                <div class="code-name">#icon-term</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settlement"></use>
                </svg>
                <div class="name">settlement</div>
                <div class="code-name">#icon-settlement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-concept"></use>
                </svg>
                <div class="name">concept</div>
                <div class="code-name">#icon-concept</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-book"></use>
                </svg>
                <div class="name">book</div>
                <div class="code-name">#icon-book</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discussion"></use>
                </svg>
                <div class="name">discussion</div>
                <div class="code-name">#icon-discussion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tie"></use>
                </svg>
                <div class="name">tie</div>
                <div class="code-name">#icon-tie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bag"></use>
                </svg>
                <div class="name">bag</div>
                <div class="code-name">#icon-bag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera_flip"></use>
                </svg>
                <div class="name">camera_flip</div>
                <div class="code-name">#icon-camera_flip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-grab_class"></use>
                </svg>
                <div class="name">grab_class</div>
                <div class="code-name">#icon-grab_class</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flower"></use>
                </svg>
                <div class="name">flower</div>
                <div class="code-name">#icon-flower</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-direction_left"></use>
                </svg>
                <div class="name">direction_left</div>
                <div class="code-name">#icon-direction_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-direction_right"></use>
                </svg>
                <div class="name">direction_right</div>
                <div class="code-name">#icon-direction_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diamond"></use>
                </svg>
                <div class="name">diamond</div>
                <div class="code-name">#icon-diamond</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">jifen</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
